<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dify Workflow Interface</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .header p {
            font-size: 1.1em;
            opacity: 0.9;
        }

        .main-content {
            padding: 40px;
        }

        .test-section {
            margin-bottom: 40px;
            padding: 30px;
            border: 2px solid #e1e8ed;
            border-radius: 10px;
            background: #f8fafc;
        }

        .section-title {
            font-size: 1.5em;
            color: #2d3748;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }

        .section-title::before {
            content: "🚀";
            margin-right: 10px;
            font-size: 1.2em;
        }

        .test-section:nth-child(2) .section-title::before {
            content: "⚡";
        }

        .test-section:nth-child(3) .section-title::before {
            content: "🎯";
        }

        .test-button {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 15px 30px;
            font-size: 1.1em;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-right: 15px;
            margin-bottom: 15px;
        }

        .test-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .test-button:active {
            transform: translateY(0);
        }

        .test-button:disabled {
            background: #cbd5e0;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .response-section {
            margin-top: 20px;
        }

        .response-title {
            font-weight: bold;
            color: #2d3748;
            margin-bottom: 10px;
            font-size: 1.1em;
        }

        .response-content {
            background: #1a202c;
            color: #e2e8f0;
            padding: 20px;
            border-radius: 8px;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 0.9em;
            line-height: 1.6;
            white-space: pre-wrap;
            max-height: 400px;
            overflow-y: auto;
            border: 1px solid #2d3748;
        }

        .success {
            border-left: 4px solid #48bb78;
        }

        .error {
            border-left: 4px solid #f56565;
        }

        .loading {
            border-left: 4px solid #ed8936;
        }

        .info-box {
            background: #ebf8ff;
            border: 1px solid #bee3f8;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 30px;
        }

        .info-title {
            font-weight: bold;
            color: #2b6cb0;
            margin-bottom: 10px;
        }

        .api-endpoint {
            background: #1a202c;
            color: #e2e8f0;
            padding: 15px;
            border-radius: 6px;
            font-family: monospace;
            margin: 10px 0;
            border: 1px solid #2d3748;
        }

        .status-indicator {
            display: inline-block;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.9em;
            font-weight: bold;
            margin-left: 10px;
        }

        .status-loading {
            background: #fed7d7;
            color: #c53030;
        }

        .status-success {
            background: #c6f6d5;
            color: #2f855a;
        }

        .status-error {
            background: #fed7d7;
            color: #c53030;
        }

        @media (max-width: 768px) {
            .main-content {
                padding: 20px;
            }
            
            .test-section {
                padding: 20px;
            }
            
            .header h1 {
                font-size: 2em;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Dify Workflow Interface</h1>
            <p>测试和调用 Dify Workflow API</p>
        </div>
        
        <div class="main-content">
            <div class="info-box">
                <div class="info-title">📋 接口信息</div>
                <p><strong>API URL:</strong> http://localhost/v1/workflows/run</p>
                <p><strong>用户:</strong> Visoon</p>
                <p><strong>响应模式:</strong> streaming</p>
                <div class="api-endpoint">
curl -X POST 'http://localhost/v1/workflows/run' \
--header 'Authorization: Bearer app-NvJlbn3xod7YfF8ozSgdUZ0y' \
--header 'Content-Type: application/json' \
--data-raw '{
  "inputs": {},
  "response_mode": "streaming",
  "user": "Visoon"
}'
                </div>
            </div>

            <div class="test-section">
                <div class="section-title">标准接口调用</div>
                <p style="margin-bottom: 20px; color: #4a5568;">
                    调用包含完整错误处理和响应的接口。适合在生产环境中使用。
                </p>
                <button class="test-button" onclick="callStandardAPI()">
                    🔥 调用标准接口
                </button>
                <div class="response-section" id="standard-response" style="display: none;">
                    <div class="response-title">
                        响应结果 <span id="standard-status" class="status-indicator"></span>
                    </div>
                    <div class="response-content" id="standard-content"></div>
                </div>
            </div>

            <div class="test-section">
                <div class="section-title">简化接口调用</div>
                <p style="margin-bottom: 20px; color: #4a5568;">
                    调用返回原始响应的接口，包含状态码和响应头信息。
                </p>
                <button class="test-button" onclick="callSimpleAPI()">
                    ⚡ 调用简化接口
                </button>
                <div class="response-section" id="simple-response" style="display: none;">
                    <div class="response-title">
                        响应结果 <span id="simple-status" class="status-indicator"></span>
                    </div>
                    <div class="response-content" id="simple-content"></div>
                </div>
            </div>

            <div class="test-section">
                <div class="section-title">自定义参数调用</div>
                <p style="margin-bottom: 20px; color: #4a5568;">
                    发送自定义参数的接口调用测试。
                </p>
                <textarea 
                    id="custom-inputs" 
                    style="width: 100%; height: 100px; padding: 10px; border: 1px solid #cbd5e0; border-radius: 6px; font-family: monospace; margin-bottom: 15px;"
                    placeholder='输入 JSON 格式的参数，例如: {"name": "test", "value": 123}'
                >{"message": "测试消息", "user_id": 12345}</textarea>
                <br>
                <button class="test-button" onclick="callCustomAPI()">
                    🎯 调用自定义接口
                </button>
                <div class="response-section" id="custom-response" style="display: none;">
                    <div class="response-title">
                        响应结果 <span id="custom-status" class="status-indicator"></span>
                    </div>
                    <div class="response-content" id="custom-content"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 设置按钮状态
        function setButtonState(button, loading) {
            if (loading) {
                button.disabled = true;
                button.textContent = '⏳ 调用中...';
            } else {
                button.disabled = false;
                if (button.textContent.includes('调用标准接口')) {
                    button.textContent = '🔥 调用标准接口';
                } else if (button.textContent.includes('调用简化接口')) {
                    button.textContent = '⚡ 调用简化接口';
                } else if (button.textContent.includes('调用自定义接口')) {
                    button.textContent = '🎯 调用自定义接口';
                }
            }
        }

        // 显示响应结果
        function showResponse(responseId, statusId, content, success, loading = false) {
            const responseDiv = document.getElementById(responseId);
            const statusSpan = document.getElementById(statusId);
            const contentDiv = document.getElementById(content);

            responseDiv.style.display = 'block';
            
            if (loading) {
                statusSpan.textContent = '加载中...';
                statusSpan.className = 'status-indicator status-loading';
                contentDiv.textContent = '正在调用接口，请稍候...';
                contentDiv.className = 'response-content loading';
            } else {
                statusSpan.className = success ? 
                    'status-indicator status-success' : 
                    'status-indicator status-error';
                statusSpan.textContent = success ? '成功' : '失败';
                contentDiv.className = `response-content ${success ? 'success' : 'error'}`;
            }
        }

        // 调用标准API
        async function callStandardAPI() {
            const button = event.target;
            const responseId = 'standard-response';
            const statusId = 'standard-status';
            const contentId = 'standard-content';

            setButtonState(button, true);
            showResponse(responseId, statusId, contentId, false, true);

            try {
                const response = await fetch('/api/dify/workflow/call/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        inputs: {}
                    })
                });

                const data = await response.json();
                
                document.getElementById(contentId).textContent = JSON.stringify(data, null, 2);
                showResponse(responseId, statusId, contentId, data.success, false);
                
            } catch (error) {
                const errorData = {
                    success: false,
                    error: 'Network Error',
                    details: error.message
                };
                
                document.getElementById(contentId).textContent = JSON.stringify(errorData, null, 2);
                showResponse(responseId, statusId, contentId, false, false);
            } finally {
                setButtonState(button, false);
            }
        }

        // 调用简化API
        async function callSimpleAPI() {
            const button = event.target;
            const responseId = 'simple-response';
            const statusId = 'simple-status';
            const contentId = 'simple-content';

            setButtonState(button, true);
            showResponse(responseId, statusId, contentId, false, true);

            try {
                const response = await fetch('/api/dify/workflow/simple/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                });

                const data = await response.json();
                
                document.getElementById(contentId).textContent = JSON.stringify(data, null, 2);
                showResponse(responseId, statusId, contentId, data.status_code === 200, false);
                
            } catch (error) {
                const errorData = {
                    status_code: 500,
                    content: `Error: ${error.message}`,
                    headers: {}
                };
                
                document.getElementById(contentId).textContent = JSON.stringify(errorData, null, 2);
                showResponse(responseId, statusId, contentId, false, false);
            } finally {
                setButtonState(button, false);
            }
        }

        // 调用自定义参数API
        async function callCustomAPI() {
            const button = event.target;
            const responseId = 'custom-response';
            const statusId = 'custom-status';
            const contentId = 'custom-content';
            
            const inputsText = document.getElementById('custom-inputs').value;

            setButtonState(button, true);
            showResponse(responseId, statusId, contentId, false, true);

            try {
                // 解析用户输入的JSON
                let inputs = {};
                if (inputsText.trim()) {
                    inputs = JSON.parse(inputsText);
                }

                const response = await fetch('/api/dify/workflow/call/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        inputs: inputs
                    })
                });

                const data = await response.json();
                
                document.getElementById(contentId).textContent = JSON.stringify(data, null, 2);
                showResponse(responseId, statusId, contentId, data.success, false);
                
            } catch (error) {
                let errorMessage = error.message;
                if (error instanceof SyntaxError) {
                    errorMessage = 'JSON 格式错误：' + error.message;
                }
                
                const errorData = {
                    success: false,
                    error: '请求失败',
                    details: errorMessage
                };
                
                document.getElementById(contentId).textContent = JSON.stringify(errorData, null, 2);
                showResponse(responseId, statusId, contentId, false, false);
            } finally {
                setButtonState(button, false);
            }
        }

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('🚀 Dify Workflow Interface 已加载完成');
            console.log('📋 可用的接口：');
            console.log('   - /api/dify/workflow/call/     (标准接口)');
            console.log('   - /api/dify/workflow/simple/  (简化接口)');
            console.log('   - /dify/interface/            (这个页面)');
        });
    </script>
</body>
</html>